<template>
  <div>
	
	<myheader></myheader>

	<br>
		<!-- 面包屑导航 -->
		<Breadcrumb :datas='datas'></Breadcrumb>
	<section class="featured-block text-center">
		<div class="container">
			
			<Avatar :src="src" :width="150" fit='fill'></Avatar>

			<br>

			<!-- 视频地址 -->
			<video id='video' v-show="qiniu_video" :src="qiniu_video" autoplay controls width="300px" height="200px" muted ></video>

			<br>

			<Button color='red'  @click='changepic'>{{ mybutton }}</Button>

			<br><br>

			<table>
				<tr style='padding: 5px;'>
					<td style='padding: 5px;'>
						修改密码:
					</td>
					<td style='padding: 5px;'>
						<input type="text" name="" id="" v-model='password'>
					</td>
				</tr>
				<tr style='padding: 5px;'>
					<td style='padding: 5px;'>
						确认密码:
					</td>
					<td style='padding: 5px;'>
						<input type="text" name="" id="" v-model='password_one'>
					</td>
				</tr>

				<tr style='padding: 5px;'>
					<td style='padding: 5px;'>
						头像上传:
					</td>
					<td style='padding: 5px;'>
						<input type="file" @change="upload">

					</td>
				</tr>

				<tr style='padding: 5px;'>
					<td style='padding: 5px;'>

						七牛云文件存储:


					</td>
					<td style='padding: 5px;'>
						<input type="file" @change="upload_qiniu">

					</td>
				</tr>

				<tr style='padding: 5px;'>
					<td style='padding: 5px;'>

						{{ loadpercent }}
						进度展示 :

					</td>
					<td style='padding: 5px;'>
						<!-- HeyUI进度条展示 -->
						<Progress v-show="loadpercent_int" :percent='loadpercent_int' color='green'>
							<span slot="title"></span>
							<span slot="text">{{ loadpercent_int }}%</span>
						</Progress>
					</td>
				</tr>

				<tr style='padding: 5px;'>
					<td style='padding: 5px;'>

					</td>
					<td style='padding: 5px;'>
						<Button @click='submit'>提交</Button>&nbsp;&nbsp;

					</td>
				</tr>

			</table>

			<br><br>

			<div>
				关注商品列表:
				<Checkbox :datas="goods" v-model="good_value" ></Checkbox>

				<br><br>

				<Button color="green" @click="flow">批量操作</Button>
			</div>

		</div>
	</section>
	
	<myfooter></myfooter>
    
  </div>
  
</template>


 
<script>

//导包
import myheader from './myheader.vue';
import myfooter from './myfooter.vue';

import dragVerify from 'vue-drag-verify';

import {config,formatXml} from '../config.js'


export default {
  data () {
    return {
	  msg: "这是一个变量",
	  //声明面包屑变量
	  datas:[{title:'首页',route:{name:'index'}},{title:'我的首页'}],
	  password:'',
	  password_one:'',

	  //头像变量
	  src:'',

	  //七牛上传凭证
	  uptoken:'',

	  //定义视频变量
	  qiniu_video:'', 
		
	  //进度展示
	  loadpercent:'',

	  //定义整型进度展示变量
	  loadpercent_int:0,


	  //	定义图片文件类型列表和视频文件类型列表
	  img_list :['png','jpg','jpeg','bmp'],

	  video_list :['mp4','avi','mov','fiv'],

	  //切换按钮变量
	  mybutton:'进入画中画',

	  //商品关注列表
	  goods:[],
	  good_value:[],
	  myid:{

	  },

    }
  },

  //注册组件标签
  components:{
	'myheader': myheader,
	'myfooter': myfooter,

	dragVerify: dragVerify,

  },

  mounted:function(){
	//获取uptoken
	this.get_uptoken()

	//获取用户信息
	this.axios.get(config['after_end'] + '/userinfo/',{params:{uid:localStorage.getItem('uid'),'jwt':localStorage.getItem('jwt')}}).then((result)=>{

	//打印接口返回值
	console.log(result)

	this.src = 'http://q690i25l0.bkt.clouddn.com/' + result.data.img;

	this.qiniu_video = 'http://q690i25l0.bkt.clouddn.com/' + result.data.video;

	})

	//获取关注列表
	this.get_goods()
   
  
},
  methods:{

	  //提交文件上传
	  upload:function(e){

		//获取文件对象
		let file = e.target.files[0];

		//声明参数
		let param = new FormData();

		//添加文件
		param.append('file',file,file.name)

		//声明请求头
		let config = {headers:{'Content-Type':'multipart/form-data'}};

		//发送请求
		this.axios.post('http://127.0.0.1:8000/uploadfile/',param,config).then((result)=>{
			  //打印接口返回值
			  console.log(result)

			  //赋值操作
			  this.src = 'http://localhost:8000/static/upload/' + result.data.filename;
		

		  });

	  },

	  //获取七牛云凭证
	  get_uptoken(){
		this.axios.get(config['after_end'] + '/uptoken/',).then((result)=>{
			  //打印接口返回值
			  console.log(result)
			  //赋值up_token
			  this.uptoken = result.data.token

		  })

	  },

	  //上传七牛云
	  upload_qiniu:function(e){

		console.log(this.uptoken)

		//获取文件对象
		let file = e.target.files[0];

		//获取文件后缀名
		let suffix= file.name.split('.').pop()

		this.$Message(suffix)

		//声明参数
		let param = new FormData();

		//将上传凭证添加参数
		param.append('token',this.uptoken);

		//附加文件
		param.append('file',file);

		//判断要上传的文件类型
			//
			//
		if (this.img_list.indexOf(suffix) > -1){
					//定制化axios请求
			const axios_qiniu = this.axios.create({withCredentials:false});

			//发送请求
			axios_qiniu({
				//声明请求类型
				method:'POST',
				//定义url
				url:'http://up-z1.qiniu.com/',
				//data传递参数('post请求传参用data')
				data:param,
				//设置超时时间
				timeout:30000,

				//上传进度捕捉方法
					//下载进度捕捉方法 : onownloadProgress
				onUploadProgress:(e) => {
					//计算进度
						//原理: 已上传的字节数除以总字节数得出
					var complete = (e.loaded / e.total);

					//判断(安慰剂按钮)
					if(complete < 1){
						this.loadpercent = (complete * 100).toFixed(2) + '%';

						//整型上传进度变量计算
						this.loadpercent_int = parseInt((complete * 100).toFixed(2));

					}

				}

			}).then((result)=>{

				console.log(result);

				//请求结束设置为100%
				this.loadpercent = "100%"

				//请求结束设置整型上传进度为100%
				this.loadpercent_int = 100

				//赋值七牛云网址显示图片
				this.src = 'http://q690i25l0.bkt.clouddn.com/' + result.data.key;

				if(result.data.key){
					this.src = 'http://q690i25l0.bkt.clouddn.com/' + result.data.key;

					//修改视频地址
					//向后端发送请求
					this.axios.get(config['after_end'] + '/updateuser/',{params:{uid:localStorage.getItem('uid'),img:result.data.key}}).then((result)=>{

					//打印接口返回值
					console.log(result)

					})


				}


			});
		}


		else if(this.video_list.indexOf(suffix) > -1){
			//定制化axios请求
			const axios_qiniu = this.axios.create({withCredentials:false});

			//发送请求
			axios_qiniu({
				//声明请求类型
				method:'POST',
				//定义url
				url:'http://up-z1.qiniu.com/',
				//data传递参数('post请求传参用data')
				data:param,
				//设置超时时间
				timeout:30000,

				//上传进度捕捉方法
					//下载进度捕捉方法 : onownloadProgress
				onUploadProgress:(e) => {
					//计算进度
						//原理: 已上传的字节数除以总字节数得出
					var complete = (e.loaded / e.total);

					//判断(安慰剂按钮)
					if(complete < 1){
						this.loadpercent = (complete * 100).toFixed(2) + '%';

						//整型上传进度变量计算
						this.loadpercent_int = parseInt((complete * 100).toFixed(2));

					}

				}

			}).then((result)=>{

				console.log(result);

				//请求结束设置为100%
				this.loadpercent = "100%"

				//请求结束设置整型上传进度为100%
				this.loadpercent_int = 100

				//赋值七牛云网址显示图片
				this.src = 'http://q690i25l0.bkt.clouddn.com/' + result.data.key;

				if(result.data.key){
					this.qiniu_video = 'http://q690i25l0.bkt.clouddn.com/' + result.data.key;

					//修改视频地址
					//向后端发送请求
					this.axios.get(config['after_end'] + '/updateuser/',{params:{uid:localStorage.getItem('uid'),video:result.data.key}}).then((result)=>{

					//打印接口返回值
					console.log(result)

					})

				}

			});

			}

	  },

	  //定义画中画切换
	  changepic:function(){
		  //判断是否处于画中画界面
		  if(video !== document.pictureInPictureElement){
			  //尝试进入画中画模式
			  video.requestPictureInPicture();

			  this.mybutton = "退出画中画"

		  }else{
			  //退出画中画
			  document.exitPictureInPicture();

			  this.mybutton = "进入画中画"

		  }

	  },
		


	  //提交密码修改
	  submit:function(){

		  //向后端发送请求
		  this.axios.get(config['after_end'] + '/upload_user/',{params:{password:this.password,password_one:this.password_one,uid:localStorage.getItem('uid')}}).then((result)=>{
			  //打印接口返回值
			  console.log(result)
			  //提醒用户已修改成功
			  this.$Message(result.data.message)

		  })

	  },


	  //获取关注商品
	  get_goods:function(){
		//向后端发送请求
		this.axios.get(config['after_end'] + '/uidflow/',{params:{uid:localStorage.getItem('uid')}}).then((result)=>{
			  //打印接口返回值
			  console.log(result)
			  //提醒用户已修改成功
			//   this.$Message(result.data.message)
			  var goods = [];

			  for (let i=0 , l=result.data.length;i<l;i++){
				  goods.push(result.data[i].name);
				  
				  this.myid[result.data[i].name] = result.data[i].id;

			  }
			  //赋值
			  this.goods = goods;
              this.good_value = goods;

              console.log(goods);

		  })

	  },

	  //批量操作
	  flow:function(){

		// console.log(this.good_value);

		var goods = [];

		for(let i=0,l=this.good_value.length;i<l;i++){

			goods.push(this.myid[this.good_value[i]]);

		}

		var glist = JSON.stringify(goods);

		// console.log(glist);


		// this.axios.get('http://localhost:8000/getflow/',{params:{uid:localStorage.getItem("uid"),ids:glist,type:2}}).then((result) =>{

	  	// 	console.log(result);

	  	// 	this.$Message(result.data.message);

		// });

		//批量
		this.axios.get(config['after_end'] + '/getflow/',{params:{uid:localStorage.getItem("uid"),ids:glist,type:2}}).then((result) =>{

	  		console.log(result);

	  		this.$Message(result.data.message);

		});

	},  
     
  }
}


</script>
 
<style>



</style>